<template>
  <view class="home container-normal">
    <view class="home-header flex">
      <view
        class="area flex"
        @click="$jump('/subPages/home/choose-city/choose-city')"
      >
        <span style="margin-right: 10rpx; font-size: 26rpx; color: #333">
          {{ city }}
        </span>
        <u-icon name="arrow-down-fill" size="10" color="#B8B8B8"></u-icon>
      </view>
      <u--input
        placeholder="请输入关键词"
        prefixIcon="search"
        shape="circle"
        border="none"
        @blur="getSearchListData"
        :customStyle="searchInputBorder"
        prefixIconStyle="font-size: 22px;color: #909399"
      ></u--input>
    </view>

    <u-swiper
      :list="logList"
      height="310rpx"
      indicator
      indicatorMode="dot"
      circular
    ></u-swiper>

    <view class="home-tab">
      <!-- tabs -->
      <MyTabs
        :list="tabList"
        @change="handleChange"
        @initList="handleInitList"
      />
    </view>

    <view class="home-list">
      <view
        class="home-list-item flex flex-item-center"
        v-for="(item, index) of projectList"
        :key="index"
        @click="
          $jump('/subPages/home/project-details/project-details', {
            query: { projectId: item._id },
          })
        "
      >
        <image
          v-if="item.project_log[0].url"
          class="flex-shrink-0"
          :src="$photo(item.project_log[0].url)"
          mode=""
        />
        <view class="home-list-item-right flex-1">
          <view style="font-weight: 800; color: #333333; font-size: 28rpx">
            {{ item.title }}
          </view>
          <view class="item-right-type">
            <text>{{ item.project_time + "分钟 | " }}</text>
            <text v-if="item.effect">
              {{ item.effect.join(" | ") }}
            </text>
          </view>
          <view>活跃技师人数：{{ item.active_people }}人</view>
          <view class="flex flex-item-center flex-justify-between">
            <view class="flex-shrink-0 price"
              >¥ <span>{{ item.price }}</span></view
            >
            <button
              class="circle-button home-btn"
              @click.stop="
                $jump('/subPages/home/technician-list/technician-list', {
                  query: { projectId: item._id },
                })
              "
            >
              去预约
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import MyTabs from "@/components/MyTabs/MyTabs.vue";
import { getModelList } from "@/api";
import { mapState } from "vuex";
import { getSearchFilter } from "@/common/function";
export default {
  components: {
    MyTabs,
  },
  data() {
    return {
      searchInputBorder: {
        "box-shadow": "0px 2px 14px 1px rgba(190,190,190,0.3)",
        height: "68rpx",
        "padding-left": "20rpx",
      },
      logListData: [],
      tabList: [
        {
          name: "全部",
          status: true,
          disabled: true,
        },
        {
          name: "价格",
          status: true,
        },
        {
          name: "活跃数",
          status: true,
        },
        {
          name: "好评度",
          status: true,
        },
      ],
      projectList: [],
      show: true,
      // 评论列表
      commentList: [],
    };
  },
  methods: {
    // 切换不同的tab项
    async handleChange({ data, index }) {
      let filterData = { currentPage: 1, pageSize: -1 };
      let sortObj;
      this.tabList[index] = data;
      switch (data.name) {
        case "价格":
          sortObj = { price: this.tabList[index].status ? "asc" : "desc" };
          break;
        case "活跃数":
          sortObj = {
            active_people: this.tabList[index].status ? "asc" : "desc",
          };
          break;
        case "好评度":
          sortObj = { score: this.tabList[index].status ? "asc" : "desc" };
          break;
        default:
          sortObj = {
            creatorTime: this.tabList[index].status ? "asc" : "desc",
          };
      }

      if (Object.keys(sortObj)) filterData["sort"] = sortObj;
      await this.getProjectListData(filterData);
    },
    // 初始化tab数据
    handleInitList(list) {
      this.tabList = list;
    },
    // 获取项目列表数据
    async getProjectListData(filter = {}) {
      const { data } = await getModelList("65b1d17c0921260197c48a76", filter);
      this.projectList = data?.list;
    },
    // 轮播图`
    async getLogListData() {
      const { data } = await getModelList("65b1d4770921260197c48a7d");
      this.logListData = data?.list?.[0].index_log;
    },
    // 搜索
    getSearchListData(value) {
      let filterData = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ title: value }, { method: "like" }),
      };
      this.getProjectListData(filterData);
    },
    //获取评论数据
    async getCommentListData() {
      const { data } = await getModelList("65b856b55efd5153ff55cd80");
      this.commentList = data?.list;
    },
  },
  computed: {
    ...mapState("address", ["city"]),
    logList() {
      return this.logListData?.map((item) => this.$photo(item.url));
    },
    filterCommentData() {
      return this.$helper.handleFilterData(this.commentList, "project_id");
    },
  },

  async onLoad() {
    await this.getLogListData();
    await this.getProjectListData();
  },
};
</script>

<style lang="scss">
.home {
  &-header {
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30rpx;

    .area {
      width: 144rpx;
    }
  }

  &-log {
    position: relative;

    &-title {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #ffffff;
      z-index: 9999;
      background-color: transparent;
    }
  }

  &-tab {
    margin-top: 20rpx;
  }

  &-list {
    padding-bottom: 20rpx;
    &-item {
      margin-top: 20rpx;
      color: #999999;

      > image {
        width: 236rpx;
        height: 190rpx;
        margin-right: 25rpx;
      }

      &-right {
        > view {
          margin-bottom: 10rpx;
          font-size: 26rpx;

          .price {
            color: #e20808;
            font-size: 22rpx;

            span {
              font-size: 32rpx;
              margin-left: 10rpx;
            }
          }
        }

        .item-right-type {
          > view {
            padding: 0 20rpx;
            border-left: 1px solid #999;

            &:first-of-type {
              border: none;
              padding-left: 0;
            }
          }
        }
      }
    }
  }
}

.u-swiper__indicator {
  z-index: 9999;
  width: 100rpx;
  height: 20rpx;
}
</style>
